<template>
	<view class="m-picker">
		<!-- 使用 u-popup 弹出层 -->
		<u-popup v-if="show" :show="show" :round="6" mode="bottom" @close="onClose" closeOnClickOverlay>
			<view class="m-picker-con">
				<!-- 顶部操作栏：取消和确认按钮 -->
				<view class="m-picker-operate">
					<text @click="onCancel">取消</text>
					<text class="u-color-black">{{title}}</text>
					<text @click="onConfirm">确认</text>
				</view>
				<!-- 选项列表 -->
				<view class="m-picker-list">
					<!-- 遍历选项，渲染每个选项 -->
					<view class="m-picker-item u-flex u-row-left u-flex-center" v-for="(col, index) in columnsList" :key="index"
					      @click="checkItem(col)">
						<!-- 选项文本 -->
						<view :class="['m-picker-item_label', col._check ? 'm-picker-item--actived' : '']"
						      :style="{color: col._check ? activedColor : '#999'}">
							{{ col[filter.name] }}
						</view>
						<!-- 已选项的标识图标 -->
						<u-icon class="m-picker-item_icon" v-if="col._check" name="checkbox-mark"
						        :color="activedColor" />
						<u-icon class="m-picker-item_icon" v-else name="checkbox-mark"
						        :color="'#fff'" />
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		// 控制组件显示
		show: {
			type: Boolean,
			required: true
		},
		// 数据源
		columns: {
			type: Array,
			default: () => []
		},
		// 数据格式化配置
		filter: {
			type: Object,
			default: () => ({
				name: 'name', // 指定用于显示的字段名
				value: 'value' // 指定用于标识的字段名
			})
		},
		title:{
			type: String,
			default: '选择月卡课程'
		},
		// 选中后的颜色
		activedColor: {
			type: String,
			default: '#333' // 默认选中颜色
		}
	},
	data() {
		return {
			// 存储处理后的选项数据
			columnsList: []
		};
	},
	watch: {
		// 监听数据源变化，初始化选项数据
		columns: {
			immediate: true,
			handler(newVal) {
				console.log("===close,newVal",newVal)
				this.columnsList = newVal.map((item) => {
					if (item._check) {
						return {
							...item,
							_check: true // 初始化选中状态
						}
					} else {
						return {
							...item,
							_check: false // 初始化未选中状态
						}
					}
				});
			}
		}
	},
	methods: {
		// 重置所有选项状态
		resetSelection() {
			this.columnsList.forEach((item) => {
				item._check = false;
			});
		},
		// 切换选项选中状态
		checkItem(col) {
			col._check = !col._check;
		},
		// 确认选择
		onConfirm() {
			const selected = this.columnsList.filter((col) => col._check); // 获取选中的项
			const values = selected.map((col) => col[this.filter.value]); // 获取选中项的值
			const labels = selected.map((col) => col[this.filter.name]); // 获取选中项的显示文本
			this.$emit('confirm', selected, values, labels); // 向父组件传递选中数据
			this.resetSelection(); // 重置选项状态
			this.$emit('close'); // 关闭组件
		},
		// 取消选择
		onCancel() {
			this.resetSelection(); // 重置选项状态
			this.$emit('close'); // 关闭组件
		},
		// 遮罩关闭
		onClose() {
			this.resetSelection(); // 重置选项状态
			this.$emit('close'); // 关闭组件
		}
	}
};
</script>

<style lang="scss" scoped>
.m-picker {
	width: 100%;
	
	.m-picker-con {
		color: #333;
		font-size: 28rpx;
		
		/* 顶部操作栏样式 */
		.m-picker-operate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding: 0 32rpx;
			
			text {
				color: #999;
				
				/* 确认按钮特殊颜色 */
				&:last-child {
					color: #3c9cff;
				}
			}
			.u-color-black{
				color: #333;
			}
		}
		
		/* 选项列表样式 */
		.m-picker-list {
			min-height: 30vh;
			/* 设置最小高度 */
			max-height: 50vh;
			/* 设置最大高度，避免选项过多超出屏幕 */
			overflow-y: scroll;
			/* 超出部分滚动 */
			
			.m-picker-item {
				position: relative;
				width: 100%;
				height: 80rpx;
				
				/* 选项文本样式 */
				.m-picker-item_label {
					width: 66%;
					margin: 0 auto;
					text-align: center;
					line-height: 80rpx;
					white-space: nowrap;
					/* 防止文字换行 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					overflow: hidden;
				}
				
				/* 选中样式 */
				.m-picker-item--actived {
					font-weight: 600;
				}
				
				/* 选中标识图标位置 */
				.m-picker-item_icon {
					position: absolute;
					top: 50%;
					right: 80rpx;
					transform: translateY(-50%);
				}
				.m-picker-item_icon-empty{
					color: transparent;
				}
			}
		}
	}
}
</style>